

export const arrow = {
    GreenRightArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标
        const x1 = 0;
        const x2 = width * 0.635; // 63.5%
        const x3 = width; // 100%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="GreenRightArrow" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" stop-color="#0f8d14" />
                <stop offset="40%" stop-color="#37e23e" />
                <stop offset="100%" stop-color="#0f8d14" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#GreenRightArrow)"/>
        `
    },
    GreenLeftArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标（镜像右箭头）
        const x1 = width; // 100%
        const x2 = width * 0.365; // 36.5% (100% - 63.5%)
        const x3 = 0; // 0%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="GreenLeftArrow" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                <stop offset="0%" stop-color="#0f8d14" />
                <stop offset="40%" stop-color="#37e23e" />
                <stop offset="100%" stop-color="#0f8d14" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#GreenLeftArrow)"/>
        `
    },
    RedRightArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标
        const x1 = 0;
        const x2 = width * 0.635; // 63.5%
        const x3 = width; // 100%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="RedRightArrow" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" stop-color="#8d0f0f" />
                <stop offset="40%" stop-color="#e23737" />
                <stop offset="100%" stop-color="#8d0f0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#RedRightArrow)"/>
        `
    },
    RedLeftArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标（镜像右箭头）
        const x1 = width; // 100%
        const x2 = width * 0.365; // 36.5% (100% - 63.5%)
        const x3 = 0; // 0%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="RedLeftArrow" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                <stop offset="0%" stop-color="#8d0f0f" />
                <stop offset="40%" stop-color="#e23737" />
                <stop offset="100%" stop-color="#8d0f0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#RedLeftArrow)"/>
        `
    },
    OrangeRightArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标
        const x1 = 0;
        const x2 = width * 0.635; // 63.5%
        const x3 = width; // 100%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="OrangeRightArrow" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" stop-color="#8d5a0f" />
                <stop offset="40%" stop-color="#e2a337" />
                <stop offset="100%" stop-color="#8d5a0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#OrangeRightArrow)"/>
        `
    },
    OrangeLeftArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标（镜像右箭头）
        const x1 = width; // 100%
        const x2 = width * 0.365; // 36.5% (100% - 63.5%)
        const x3 = 0; // 0%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="OrangeLeftArrow" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                <stop offset="0%" stop-color="#8d5a0f" />
                <stop offset="40%" stop-color="#e2a337" />
                <stop offset="100%" stop-color="#8d5a0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#OrangeLeftArrow)"/>
        `
    },
    YellowRightArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标
        const x1 = 0;
        const x2 = width * 0.635; // 63.5%
        const x3 = width; // 100%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="YellowRightArrow" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" stop-color="#8d8d0f" />
                <stop offset="40%" stop-color="#e2e237" />
                <stop offset="100%" stop-color="#8d8d0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#YellowRightArrow)"/>
        `
    },
    YellowLeftArrow: ({width = 100, height = 50}) => {
        // 计算基于width和height的坐标（镜像右箭头）
        const x1 = width; // 100%
        const x2 = width * 0.365; // 36.5% (100% - 63.5%)
        const x3 = 0; // 0%
        const y1 = height * 0.723; // 72.3%
        const y2 = height; // 100%
        const y3 = height * 0.5; // 50%
        const y4 = 0; // 0%
        const y5 = height * 0.295; // 29.5%
        
        const path1 = `M${x1}, ${y1}
                    L${x2}, ${y1}
                    L${x2}, ${y2}
                    L${x3}, ${y3}
                    L${x2}, ${y4}
                    L${x2}, ${y5}
                    L${x1}, ${y5}
                    L${x1}, ${y1}
                    Z`
        return `
        <defs>
            <radialGradient id="YellowLeftArrow" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                <stop offset="0%" stop-color="#8d8d0f" />
                <stop offset="40%" stop-color="#e2e237" />
                <stop offset="100%" stop-color="#8d8d0f" />
            </radialGradient>
        </defs>
        <path d="${path1}" fill="url(#YellowLeftArrow)"/>
        `
    },
}